<script lang="ts" setup>
import { PropType } from 'vue'

defineProps({
    gift: {
        type: Object as PropType<{ price: string; title: string; enable: boolean }>,
    },
})
</script>
<template>
    <div v-if="gift" class="gift" :class="{ disabled: !gift.enable }">
        <div class="name">{{ gift.title }}</div>
        <div class="price">{{ gift.price }}</div>
    </div>
</template>
<style lang="scss" scoped>
.gift {
    .name {
        font-size: 14px;
    }

    .price {
        font-size: 12px;
        margin-top: 3px;
    }

    &.disabled {
        color: #aaa;
    }
}
</style>
